<template>
<div class="sign-mod-SignInput">
    <!-- 编辑模式 -->
    <div class="sign-mod-edit">
        <input class="sign-mod-edit-input" v-model='tempData.title' :placeholder='tempData.placeholder' :maxlength='tempData.maxlength' />
    </div>
    <!-- 预览模式 -->
    <div class="sign-mod-prev">
        <div class="sign-header">{{tempData.title}}</div>
    </div>
</div>
</template>

<script>
export default {
    name: 'SignInput',
    props: {
        // 列表数据
        tempData: {
            type: Object,
            default: function() {
                return {
                    title: '',
                    placeholder: '请输入',
                    maxlength: 500
                };
            }
        },
        // 模板id
        templateId: {
            type: String,
            default : function () {
                return '';
            }
        },
        // 内容id
        briefingDetailId: {
            type: String,
            default : function () {
                return '';
            }
        }
    },
    data() {
        return {
        };
    },
    methods: {
        // 供子级调用(点击子级的按钮更新数据)-更新子数据
        updateSignTempData(tempData) {
            this.$emit('updateSignTempData', tempData);
            console.log('updateSignTempData:');
            console.log(tempData);
        },
        // 供父级调用(点击父级的保存按钮 tempData.isSaveInChild 为true时调用)-调用子级的保存函数
        saveSignTempForChild() {
            console.log('saveSignTempForChild:');
            console.log(this.tempData);
        },
    }  
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.sign-mod-SignInput{ height: 100%;}
.sign-mod-SignInput .sign-mod-edit, .sign-mod-SignInput .sign-mod-prev, .sign-mod-SignInput .sign-header{ height: 100%;}
.sign-mod-SignInput .sign-mod-edit > input{ width: 100%; height: 100%; outline: none; border: none; color: inherit; text-align: inherit; line-height: inherit; background-color: transparent;}
</style>
